<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="底料国家">
          <el-select
            v-model="nation"
            placeholder="请选择国家"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="导出数量">
          <el-input v-model="count" placeholder="最多支持一次百万条"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        show-overflow-tooltip
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="type" label="国家" />
        <el-table-column prop="total_count" label="数量" />
        <el-table-column prop="status_0_count" label="未使用数量" />
        <el-table-column prop="status_1_count" label="未使用成功数量" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              @click.prevent="updateRow(scope.row.type)"
            >
              重置未成功使用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElLoading } from "element-plus";
import { getList, derive ,rejectType} from "../api/IngredientManagement.js";
const count = ref('');
const nation = ref("");
const tableData = ref([]);
const options = ref([]);
const onSubmit = async () => {
  if (!nation.value || nation.value === "" || count.value < 1) {
    return;
  }
  try {
    // 发起请求并确保响应是 Blob 类型
    const response = await derive(nation.value, count.value);
    
    if (response) {
      const url = window.URL.createObjectURL(response);
      const a = document.createElement("a");
      a.href = url;
      a.download = "uuids.xlsx"; // 设置下载文件名
      document.body.appendChild(a);
      a.click();
      a.remove();

      // 释放 URL 对象
      window.URL.revokeObjectURL(url);
    }
  } catch (error) {
    console.error("下载失败:", error);
  }
};

const requestList = async () => {
  try {
   
    const loading = ElLoading.service({
    lock: true,
    text: "正在获取数据请稍等",
    background: "rgba(0, 0, 0, 0.7)",
  });
   
   
    // 发起请求并等待响应
   const response = await getList();
    // 确保响应存在并且数据有效
    if (response && response.data) {
      // 映射数据并添加 ID
      const mappedData = response.data.map((item, index) => ({
        ...item,
        id: index + 1, // 使用更明确的计数器
      }));
      // 更新表格数据
      tableData.value = mappedData;
      // 创建 options 数据
      const option = response.data.map((item) => ({
        value: item.type,
        label: item.type,
      }));
      // 更新 options
      options.value = option;
      loading.close();
    } else {
      // 处理响应为空的情况
      console.warn("Received empty response data");
      tableData.value = [];
      options.value = []; // 确保 options 也被清空
    }
  } catch (error) {
    // 处理请求失败的情况
    console.error("Failed to fetch data:", error);
    tableData.value = []; // 或者可以考虑其他的错误处理措施，比如显示错误消息
    options.value = []; // 确保 options 也被清空
  }
};


const updateRow= async(types)=>{

const loading = ElLoading.service({
    lock: true,
    text: "正在更新数据请稍等",
    background: "rgba(0, 0, 0, 0.7)",
  });
  const res = await rejectType(types);
  if(res.status===200){
    loading.close();
    requestList();
  }
}




onMounted(() => {
  requestList();
});
</script>

<style lang="scss" scoped></style>
